{% import _self as self %}

<div class="content">
    <h1>
        {{ gradeable.getTitle() }}
    </h1>
    <p>
        {% if gradeable.getTaInstructions() != "" %}
            Overall TA Instructions: {{ gradeable.getTaInstructions() }}
        {% endif %}
    </p>

    <div class="column-wrapper" style="margin: 1em 0;">
        <div id="checkpoint-sticky" class="column-wrapper">
            {% include "grading/simple/StudentSearch.twig" %}
            <div>
                <p class="not-sticky">Undo/Redo Changes</p>
                <button id="checkpoint-undo" class="btn btn-primary" onclick="checkpointRollTo('{{ gradeable.getId() }}', -1)" disabled><i class="fas fa-undo"></i></button>
                <button id="checkpoint-redo" class="btn btn-primary" onclick="checkpointRollTo('{{ gradeable.getId() }}', 1)" disabled><i class="fas fa-redo"></i></button>
            </div>
        </div>

        <div>
            <button class="btn btn-primary" id="settings-btn" onclick='showSettings()'>Settings/Hotkeys</button>
            <button class="btn btn-primary" id="simple-stats-btn" onclick='showSimpleGraderStats("{{ action }}")'>View Statistics</button>
        </div>
    </div>

    <div class="column-wrapper" style="margin: 1em 0;">
        <p>
            {% if action == 'lab' %}
                No Color - No Credit<br />
                Dark Blue - Full Credit<br />
                Light Blue - Half Credit<br />
                Red - [SAVE ERROR] Refresh Page
            {% else %}
                Red - [SAVE ERROR] Refresh Page
            {% endif %}
        </p>

        <div class="row-wrapper">
            {#
                Default is viewing your sections
                Limited grader does not have "View All" option
                If nothing to grade, Instructor will see all sections
            #}
            {% if show_all_sections_button %}
                <a
                    class="btn btn-default"
                    href="{{ grading_url }}?view={{ view_all ? '' : 'all' }}&sort={{ sort }}"
                >
                    {{ view_all ? "View Your Sections" : "View All Sections" }}
                </a>
                <br />
            {% endif %}

            {% if action == 'lab' and core.getUser().accessFullGrading() %}
                <label for="show-graders" class="column-wrapper">Show Graders
                    <input type="checkbox" id="show-graders">
                </label>
                <label for="show-dates" class="column-wrapper">Show Dates Graded
                    <input type="checkbox" id="show-dates">
                </label>
            {% endif %}
        </div>
    </div>

    {% if action == 'numeric' and core.getUser().accessAdmin() %}
        <div class="column-wrapper">
            <label for="csvUpload">Upload CSV
                <input class="csvButtonUpload" type="file" id="csvUpload" accept=".csv, .txt">
            </label>
            <p>
                The CSV file should be formatted as such:
                <br />
                user id,first name,last name,grade1,grade2,...,total points earned,text1,text2,...
            </p>
        </div>
    {% endif %}

    {# This is a data table #}
    <table id="data-table" class="table table-striped table-bordered persist-area" style="table-layout: fixed;">
        <caption />
        {# Table header #}
        <thead>
            <tr>
                <th width="20"></th>
                <th width="70">Section</th>
                <th width="90" style="text-align: left">
                    <a href="{{ grading_url }}?view={{ view_all ? 'all' : '' }}&sort=id" aria-label="sort by ID">
                        <span class="tooltiptext" title="sort by User ID">User ID </span><i class="fas fa-sort"></i>
                    </a>
                </th>
                <th width="110" style="text-align: left">
                    <a href="{{ grading_url }}?view={{ view_all ? 'all' : '' }}&sort=first" aria-label="sort by First Name">
                        <span class="tooltiptext" title="sort by First Name">First Name </span><i class="fas fa-sort"></i>
                    </a>
                </th>
                <th width="110" style="text-align: left">
                    <a href="{{ grading_url }}?view={{ view_all ? 'all' : '' }}&sort=last" aria-label="sort by Last Name">
                        <span class="tooltiptext" title="sort by Last Name">Last Name </span><i class="fas fa-sort"></i>
                    </a>
                </th>

                {% if action == 'lab' %}
                    {% set colspan = 5 + gradeable.getComponents()|length %}
                    {% for component in gradeable.getComponents() %}
                        <th width="150">
                            {{ component.getTitle() }}
                        </th>
                    {% endfor %}
                {% else %}
                    {% set colspan = 5 + components_numeric|length + components_text|length %}
                    {% if components_numeric|length > 0 %}
                        {% set colspan = colspan + 1 %}
                        {% for component in components_numeric %}
                            <th width="150" style="text-align: center">
                                {{ component.getTitle() }}({{ component.getMaxValue() }})
                            </th>
                        {% endfor %}
                        <th width="60" style="text-align: center">Total</th>
                    {% endif %}
                    {% for component in components_text %}
                        <th width="200" style="text-align: center">
                            {{ component.getTitle() }}
                        </th>
                    {% endfor %}
                {% endif %}
            </tr>
        </thead>
        {# /Table header #}
        {% if sections|length == 0 %}
            <tbody>
                <tr class="info">
                    <td colspan="{{ colspan }}" style="text-align: center; background-color: var(--alert-border-blue)">No Grading To Be Done! :)</td>
                </tr>
            </tbody>
        {% else %}
            {% set row_index_start = 0 %}
            {% for section_id, section in sections %}
                {# Section header #}
                <tbody>
                    <tr class="info">
                        <td colspan="{{ colspan }}" style="text-align: center; background-color: var(--alert-border-blue)">
                            {% if gradeable.isGradeByRegistration() %}
                                Students Enrolled in Registration Section {{ section_id | default('NULL') }}
                            {% else %}
                                Students Assigned to Rotating Section {{ section_id | default('NULL') }}
                            {% endif %}
                            {# Print button #}
                            {% if action == 'lab' %}
                                <a target=_blank href="{{ print_lab_url }}?section={{ section_id }}&section_type={{ section_type }}&sort={{ sort }}">
                                    <i class="fas fa-print"></i>
                                </a>
                            {% endif %}
                        </td>
                    </tr>
                    <tr class="info">
                        <td colspan="{{ colspan }}" style="text-align: center; background-color: var(--alert-border-blue)">
                            Graders: {{ section.grader_names|length ? section.grader_names|join(", ") : "Nobody" }}
                        </td>
                    </tr>
                </tbody>
                {# /Section header #}
                <tbody id="section-{{ section_id }}" data-numnumeric="{{ components_numeric|length }}" data-numtext="{{ components_text|length }}" data-compids="{{ component_ids }}">
                    {% for grade in section.rows %}
                        {{ self.render_row(self, action, gradeable, section, grade, loop.index0 + row_index_start, components_numeric) }}
                    {% endfor %}
                </tbody>
                {% set row_index_start = row_index_start + section.rows|length %}
            {% endfor %}
        {% endif %}
    </table>
    <script>
        $(function() {
            setupSimpleGrading("{{ action }}");
        });
    </script>
</div>

{# Render one student's row in the table #}
{% macro render_row(self, action, gradeable, section, grade, index, components_numeric) %}
    <tr id="row-{{ index }}" data-gradeable="{{ gradeable.getId() }}" data-user="{{  grade.getSubmitter().getId() }}" data-row="{{ index }}"
        {% if student.accessGrading() %}
            style='background: #7bd0f7;'
        {% endif %}
    >
        <td class="">{{ index + 1 }}</td>
        <td class="">{{ grade.getSubmitter().getUser().getRegistrationSection() }}</td>
        <td class="cell-all" style="text-align: left">{{ grade.getSubmitter().getId() }}</td>
        <td class="" style="text-align: left">{{ grade.getSubmitter().getUser().getDisplayedFirstName() }}</td>
        <td class="" style="text-align: left">{{ grade.getSubmitter().getUser().getDisplayedLastName() }}</td>

        {% if action == 'lab' %}
            {{ self.render_lab_cols(self, gradeable, section, grade, index) }}
        {% else %}
            {{ self.render_numeric_cols(self, gradeable, section, grade, index, components_numeric) }}
        {% endif %}
    </tr>
{% endmacro %}

{# Render the grading columns for a lab #}
{% macro render_lab_cols(self, gradeable, section, grade, index) %}
    {% for component in grade.getGradeable().getComponents() %}
        {% if component.isText() %}
            <td>
                {{ component.getComment() }}
            </td>
        {% else %}
            {% set ta_grade = grade.getTaGradedGradeable() %}
            {% set component_grade = ta_grade.getGradedComponent(component) %}
            <td
                class="cell-grade"
                id="cell-{{ index }}-{{ loop.index0 }}"
                tabindex="0"
                data-id="{{ component.getId() }}"
                data-score="{{ component_grade.getScore() | default('0') }}"
                {% if component_grade.getGrader() != null %}
                    data-grader="{{ component_grade.getGrader().getId() }}"
                {% endif %}
                {% if component_grade.getGradeTime() != null %}
                    data-grade-time="{{ component_grade.getGradeTime()|date("Y-m-d H:i:s") }}"
                {% endif %}
                {% if component_grade.getScore() == 1.0 %}
                    style="background-color: #149bdf;"
                {% elseif component_grade.getScore() == 0.5 %}
                    style="background-color: #88d0f4;"
                {% endif %}
            >
                {% if core.getUser().accessFullGrading() %}
                    <p class="simple-grade-grader">{{ component_grade.getGrader().getId() }}</p>
                    <p class="simple-grade-date">{{ component_grade.getGradeTime() != null ? component_grade.getGradeTime()|date("Y-m-d H:i:s") : "" }}</p>
                {% endif %}

            </td>
        {% endif %}
    {% endfor %}
{% endmacro %}

{# Render the grading columns for a test #}
{% macro render_numeric_cols(self, gradeable, section, grade, index, components_numeric) %}
    {% if components_numeric|length > 0 %}
        {% set total = 0 %}
        {% for component in grade.getGradeable().getComponents()|filter((component) => not component.isText()) %}
            {% set ta_grade = grade.getTaGradedGradeable() %}
            {% set component_grade = ta_grade.getGradedComponent(component) %}
            {% set total = total + component_grade.getScore() %}
            <td class="option-small-input">
                <input
                    class="option-small-box cell-grade"
                    style="text-align: center; {{ component_grade.getScore() == 0 ? "color: var(--standard-light-medium-gray);" : "" }}
                        {{ component_grade.getScore() == 0 ? "background-color: var(--alert-background-blue);" : "background-color: var(--default-white);" }}"
                    type="text"
                    id="cell-{{ index }}-{{ loop.index0 }}"
                    data-id="{{ component.getId() }}"
                    data-origval="{{ component_grade.getScore() | default('0') }}"
                    value="{{ component_grade.getScore() | default('0') }}"
                    onclick="this.select()"
                    onchange=" this.style.backgroundColor = 'var(--default-white)';"
                    {% if component_grade.getGrader() != null %}
                        data-grader="{{ component_grade.getGrader().getId() }}"
                    {% endif %}
                    {% if component_grade.getGradeTime() != null %}
                        data-grade-time="{{ component_grade.getGradeTime()|date("Y-m-d H:i:s") }}"
                    {% endif %}
                    data-num="true"
                />
            </td>
        {% endfor %}

        <td class="option-small-output">
            <div class="option-small-box cell-total" style="text-align: center" type="text" border="none" id="total-{{ index }}" data-total="true">{{ total }}</div>
        </td>
    {% endif %}

    {% set text_start = components_numeric|length %}
    {% for component in grade.getGradeable().getComponents()|filter((component) => component.isText()) %}
        {% set ta_grade = grade.getTaGradedGradeable() %}
        {% set component_grade = ta_grade.getGradedComponent(component) %}
        <td class="option-small-input">
            <input
                class="option-small-box cell-grade"
                type="text"
                id="cell-{{ index }}-{{ text_start + loop.index0 }}"
                value="{{ component_grade.getComment() }}"
                onclick="this.select()"
                data-id="{{ component.getId() }}"
            />
        </td>
    {% endfor %}
{% endmacro %}
